<template>
	<view class="all">
		<view class="head flex_sp">
			<view class="box flex_sp" @click="showpop1()">
				<input type="text" placeholder="年/月/日" v-model="starttime" />
				<image src="../../../static/index/card.png" mode=""></image>
			</view>
			<view class="aline">
				-
			</view>
			<view class="box flex_sp" @click="showpop2()">
				<input type="text" placeholder="年/月/日" v-model="endtime" />
				<image src=" ../../../static/index/card.png" mode=""></image>
			</view>
			<u-datetime-picker :show="show1" @close="show1=false" v-model="v1" :closeOnClickOverlay="true" mode="date"
				@confirm="confirm1" @cancel="cancel1"></u-datetime-picker>
			<u-datetime-picker :show="show2" @close="show2=false" v-model="v2" :closeOnClickOverlay="true" mode="date"
				@confirm="confirm2" @cancel="cancel2"></u-datetime-picker>
		</view>
		<view class="center flex_sp">
			<view class="left">
				提现明细
			</view>
			<view class="right">
				展示近一年明细
			</view>
		</view>
		<view class="body">
			<u-empty v-show="show3" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<view v-show="!show3" class="box" v-for="(item , index) in lists" :key="index">
				<view class="top flex_sp">
					<view class="left">
						提现——{{item.bank}}
					</view>
					<view class="right" v-show="item.statys==0">
						审核中
					</view>
					<view class="right" v-show="item.status==1">
						审核通过
					</view>
					<view class="right" v-show="item.status==2">
						审核驳回
					</view>
				</view>
				<view class="center2 flex_sp">
					<view class="left">
						+{{item.price}}
					</view>
					<view class="right">
						{{item.create_time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show1: false,
				v1: Number(new Date()),
				show2: false,
				v2: Number(new Date()),
				starttime: "",
				endtime: "",
				show3: false,
				lists: []
			};
		},
		onLoad() {
			this.getmoney()
		},
		methods: {
			//获取数据
			async getmoney() {
				const res = await this.$api("/business/user/withdrawal_detailed", 'post', {
					start_time: this.starttime,
					end_time: this.endtime,
				}).then(res => {
					console.log(res);
					console.log(res.data.data);
					this.lists = res.data.data
					if (res.data.data.length == 0) {
						this.show3 = true
					} else {
						this.show3 = false
					}
				})
			},
			showpop1() {
				this.show1 = true
			},
			showpop2() {
				this.show2 = true
			},
			confirm1(e) {
				console.log(e);
				this.show1 = false
				let a = new Date(e.value)
				this.starttime = a.getFullYear() + "-" + a.getMonth() + "-" + a.getDate()
				if (this.starttime && this.endtime) {
					this.getmoney()
				}
			},
			confirm2(e) {
				console.log(e);
				this.show2 = false
				let b = new Date(e.value)
				this.endtime = b.getFullYear() + "-" + b.getMonth() + "-" + b.getDate()
				if (this.starttime && this.endtime) {
					this.getmoney()
				}
			},
			cancel1() {
				this.show1 = false
			},
			cancel2() {
				this.show2 = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		padding: 15px;
		background-color: #F5F5F5;
		min-height: calc(100vh - 72px);

		.head {
			.aline {
				margin: 0 10px;
			}

			.box {
				padding: 10px;
				border-radius: 5px;
				border: 1px solid #999999;

				image {
					width: 18px;
					height: 18px;
				}

				input {
					font-size: 12px;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.lists {
			.box {
				background: #F5F5F5;
				border-radius: 10px;
				padding: 10px;
				margin: 10px 0;

				.top {
					margin: 10px 0;

					.left {
						font-size: 13px;
						font-weight: bold;
						color: #333333;
					}

					.right {
						font-size: 13px;
						font-weight: bold;
						color: #333333;
					}
				}

				.bot {
					margin: 10px 0;

					.left {
						font-size: 13px;
						font-weight: bold;
						color: #333333;
					}

					.right {
						font-size: 13px;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}

		.center {
			margin: 20px 0;

			.left {
				font-size: 14px;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.right {
				font-size: 14px;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.body {
			.box {
				padding: 10px;
				background: #FFFFFF;
				border-radius: 10px;
				margin: 10px 0;

				.top {
					margin: 10px 0;

					.left {
						font-size: 13px;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.right {
						font-size: 14px;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #FB774B;
					}
				}

				.center2 {
					margin: 10px 0;

					.left {
						font-size: 13px;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.right {
						font-size: 13px;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}
</style>